<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星际秒杀系统 - 登录</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- MD5加密库 -->
    <script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js"></script>
    
    <!-- 自定义样式 -->
    <style>
        /* 基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
            height: 100vh;
            overflow: hidden;
            background: #000;
            color: #fff;
            position: relative;
        }
        
        /* 背景容器 */
        .bg-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }
        
        /* 星空效果 */
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .star {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle 3s infinite ease-in-out;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.8; }
        }
        
        /* 网格效果 */
        .grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(65, 105, 225, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(65, 105, 225, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            z-index: -1;
            transform: perspective(500px) rotateX(60deg);
            transform-origin: center top;
            animation: gridMove 20s linear infinite;
        }
        
        @keyframes gridMove {
            0% { background-position: 0 0; }
            100% { background-position: 0 600px; }
        }
        
        /* 辉光效果 */
        .glow {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            filter: blur(70px);
            opacity: 0.4;
            z-index: -1;
        }
        
        .glow-blue {
            background: radial-gradient(circle, rgba(65, 105, 225, 0.6) 0%, rgba(65, 105, 225, 0) 70%);
            top: 15%;
            left: 15%;
            animation: glowPulse 8s ease-in-out infinite;
        }
        
        .glow-purple {
            background: radial-gradient(circle, rgba(138, 43, 226, 0.6) 0%, rgba(138, 43, 226, 0) 70%);
            bottom: 15%;
            right: 15%;
            animation: glowPulse 6s ease-in-out infinite reverse;
        }
        
        @keyframes glowPulse {
            0%, 100% { transform: scale(0.8); opacity: 0.3; }
            50% { transform: scale(1); opacity: 0.5; }
        }
        
        /* 宇宙飞船样式 */
        .spaceship-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .spaceship {
            position: absolute;
            z-index: -1;
            animation: spaceshipFly linear infinite;
        }
        
        .spaceship-type-1::before {
            content: '🚀';
            font-size: 28px;
            display: block;
        }
        
        .spaceship-type-2::before {
            content: '🛸';
            font-size: 36px;
            display: block;
        }
        
        @keyframes spaceshipFly {
            0% {
                transform: translateX(-100px) translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.8;
            }
            100% {
                transform: translateX(calc(100vw + 100px)) translateY(var(--y-offset)) rotate(var(--rotation));
                opacity: 0;
            }
        }
        
        /* 登录容器 */
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 450px;
            z-index: 10;
        }
        
        /* 玻璃态卡片 */
        .glass-card {
            background: rgba(20, 20, 40, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(65, 105, 225, 0.3);
            border-radius: 18px;
            padding: 40px;
            box-shadow: 0 0 30px rgba(65, 105, 225, 0.2), 
                        0 0 60px rgba(65, 105, 225, 0.1),
                        inset 0 0 10px rgba(65, 105, 225, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        /* 装饰元素 */
        .glass-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(65, 105, 225, 0.1), transparent);
            transform: rotate(-45deg);
            animation: shine 8s linear infinite;
        }
        
        @keyframes shine {
            0% { transform: translateX(-100%) rotate(-45deg); }
            100% { transform: translateX(100%) rotate(-45deg); }
        }
        
        /* 标题样式 */
        .login-title {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
        }
        
        .login-title h1 {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: 3px;
            background: linear-gradient(90deg, #fff, #4169E1, #8A2BE2, #fff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 300% 100%;
            animation: titleGlow 6s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes titleGlow {
            0% { background-position: 0 0; }
            100% { background-position: 300% 0; }
        }
        
        .login-title p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 1rem;
            letter-spacing: 1px;
        }
        
        /* 装饰线 */
        .decorative-line {
            height: 2px;
            width: 100%;
            background: linear-gradient(90deg, transparent, rgba(65, 105, 225, 0.8), transparent);
            margin: 25px 0;
        }
        
        /* 表单样式 */
        .login-form .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .login-form label {
            display: block;
            margin-bottom: 10px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .login-form input {
            width: 100%;
            padding: 14px 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(65, 105, 225, 0.3);
            border-radius: 8px;
            font-size: 1rem;
            color: white;
            transition: all 0.3s ease;
            font-family: inherit;
            letter-spacing: 1px;
        }
        
        .login-form input:focus {
            outline: none;
            border-color: rgba(65, 105, 225, 0.8);
            box-shadow: 0 0 20px rgba(65, 105, 225, 0.3);
            background: rgba(255, 255, 255, 0.1);
        }
        
        .login-form input::placeholder {
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.9rem;
            letter-spacing: 1px;
        }
        
        /* 表单图标 */
        .form-icon {
            position: absolute;
            right: 20px;
            top: 52px;
            color: rgba(65, 105, 225, 0.7);
            font-size: 1.1rem;
        }
        
        /* 登录按钮 */
        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(90deg, rgba(65, 105, 225, 0.9), rgba(138, 43, 226, 0.9));
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            margin-top: 10px;
            font-family: inherit;
        }
        
        .login-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
        }
        
        .login-btn:hover::before {
            left: 100%;
        }
        
        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 30px rgba(65, 105, 225, 0.5);
        }
        
        .login-btn:active {
            transform: translateY(0);
        }
        
        .login-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 错误提示 */
        .error-message {
            color: #ff4d4d;
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
            text-align: center;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 粒子效果 */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        /* 响应式设计 */
        @media (max-width: 576px) {
            .glass-card {
                padding: 30px 25px;
            }
            
            .login-title h1 {
                font-size: 2rem;
            }
            
            .login-form input {
                padding: 12px 15px;
            }
            
            .form-icon {
                right: 15px;
                top: 48px;
            }
        }
        
        /* 额外的字体 */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
    </style>
</head>
<body>
    <!-- 科幻背景元素 -->
    <div class="bg-container"></div>
    <div class="stars" id="stars"></div>
    <div class="grid"></div>
    <div class="glow glow-blue"></div>
    <div class="glow glow-purple"></div>
    <div class="spaceship-container" id="spaceshipContainer"></div>
    <div class="particles" id="particles"></div>
    
    <!-- 登录容器 -->
    <div class="login-container">
        <div class="glass-card">
            <div class="login-title">
                <h1>星际秒杀系统</h1>
                <p>未来购物体验的入口</p>
            </div>
            
            <div class="decorative-line"></div>
            
            <!-- 登录表单 -->
            <form class="login-form" id="loginForm">
                <div class="form-group">
                    <label for="mobile">认证码</label>
                    <input id="mobile" type="text" placeholder="请输入手机号码" required maxlength="11">
                    <div class="form-icon">📱</div>
                </div>
                
                <div class="form-group">
                    <label for="password">访问密钥</label>
                    <input id="password" type="password" placeholder="请输入密码" required minlength="6" maxlength="16">
                    <div class="form-icon">🔒</div>
                </div>
                
                <button type="button" class="login-btn" id="loginBtn" onclick="login()">
                    <span id="loginBtnText">登录系统</span>
                    <span id="loadingIndicator" class="loading" style="display:none;"></span>
                </button>
                
                <div id="errorMessage" class="error-message"></div>
            </form>
        </div>
    </div>

    <script>
        // 生成星空
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starsCount = 250;
            
            for (let i = 0; i < starsCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机位置
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                
                // 随机大小
                const size = Math.random() * 2.5 + 0.5;
                
                // 随机动画延迟和持续时间
                const delay = Math.random() * 5;
                const duration = Math.random() * 4 + 2;
                
                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.animationDelay = `${delay}s`;
                star.style.animationDuration = `${duration}s`;
                
                starsContainer.appendChild(star);
            }
        }
        
        // 创建宇宙飞船
        function createSpaceship() {
            const container = document.getElementById('spaceshipContainer');
            const spaceship = document.createElement('div');
            
            // 随机选择飞船类型
            const shipTypes = ['spaceship-type-1', 'spaceship-type-2'];
            const randomType = shipTypes[Math.floor(Math.random() * shipTypes.length)];
            spaceship.className = `spaceship ${randomType}`;
            
            // 随机垂直位置
            const startY = Math.random() * 100;
            spaceship.style.top = `${startY}%`;
            
            // 随机飞行路径偏移
            const yOffset = Math.random() * 60 - 30; // -30 到 30 的随机值
            
            // 随机旋转角度
            const rotation = Math.random() * 30 - 15; // -15 到 15 的随机值
            
            // 随机动画持续时间
            const duration = 15 + Math.random() * 30; // 15 到 45 秒
            
            // 设置CSS变量
            spaceship.style.setProperty('--y-offset', `${yOffset}%`);
            spaceship.style.setProperty('--rotation', `${rotation}deg`);
            spaceship.style.animationDuration = `${duration}s`;
            
            // 添加到容器
            container.appendChild(spaceship);
            
            // 动画结束后移除飞船
            setTimeout(() => {
                spaceship.remove();
            }, duration * 1000);
        }
        
        // 定期创建新的宇宙飞船
        function scheduleSpaceships() {
            // 立即创建一个飞船
            createSpaceship();
            
            // 然后定期创建更多飞船
            setInterval(() => {
                createSpaceship();
            }, 8000 + Math.random() * 12000); // 8 到 20 秒的随机间隔
        }
        
        // 页面加载完成后初始化
        window.onload = function() {
            createStars();
            scheduleSpaceships();
        };
        
        // 表单验证函数
        function validateForm() {
            const mobile = document.getElementById('mobile').value;
            const password = document.getElementById('password').value;
            const errorMessage = document.getElementById('errorMessage');
            
            // 重置错误信息
            errorMessage.style.display = 'none';
            
            // 验证手机号
            if (!mobile || mobile.length !== 11 || !/^1\d{10}$/.test(mobile)) {
                errorMessage.textContent = '请输入有效的11位手机号码';
                errorMessage.style.display = 'block';
                return false;
            }
            
            // 验证密码
            if (!password || password.length < 6 || password.length > 16) {
                errorMessage.textContent = '密码长度应在6-16位之间';
                errorMessage.style.display = 'block';
                return false;
            }
            
            return true;
        }
        
        // 登录函数
        function login() {
            // 表单验证
            if (!validateForm()) {
                return;
            }
            
            // 显示加载状态
            const loginBtn = document.getElementById('loginBtn');
            const loginBtnText = document.getElementById('loginBtnText');
            const loadingIndicator = document.getElementById('loadingIndicator');
            
            loginBtn.disabled = true;
            loginBtnText.textContent = '登录中';
            loadingIndicator.style.display = 'inline-block';
            
            // 调用doLogin函数进行实际登录
            doLogin();
        }
        
        // 实际登录函数 - 与后端交互
        function doLogin() {
            const mobile = document.getElementById('mobile').value;
            const inputPass = document.getElementById('password').value;
            
            // 密码加密处理（使用MD5加密）
            // 注意：这里的salt应该从服务器获取或者使用固定值
            // 为了演示，我们使用一个临时的salt
            const salt = "seckill_salt_2024";
            // 按照后端的加密规则，使用salt的第1个字符和第7个字符（索引0和6）
            const str = "" + salt.charAt(0) + inputPass + salt.charAt(6);
            const password = md5(str);
            
            // 构建GET请求URL
            const url = `/login/doLogin?mobile=${encodeURIComponent(mobile)}&password=${encodeURIComponent(password)}`;
            
            // 发送AJAX请求
            $.ajax({
                url: url,
                type: "GET",
                timeout: 10000, // 设置10秒超时
                success: function(data) {
                    // 重置登录按钮状态
                    resetLoginButton();
                    
                    // 处理响应结果
                    if (data && data.code === 200) {
                        // 登录成功
                        showNotification('登录成功', 'success');
                        // 可以在这里添加登录成功后的跳转逻辑
                        setTimeout(() => {
                            // 示例：跳转到首页
                            window.location.href = '/';
                        }, 1500);
                    } else {
                        // 登录失败
                        showNotification(data ? data.message : '登录失败，请重试', 'error');
                    }
                },
                error: function(xhr, status, error) {
                    // 重置登录按钮状态
                    resetLoginButton();
                    
                    // 处理请求错误
                    let errorMsg = '网络错误，请检查网络连接';
                    if (status === 'timeout') {
                        errorMsg = '登录请求超时，请重试';
                    } else if (xhr.status === 406) {
                        errorMsg = '服务器无法处理请求的内容类型';
                    }
                    
                    showNotification(errorMsg, 'error');
                }
            });
        }
        
        // 重置登录按钮状态
        function resetLoginButton() {
            const loginBtn = document.getElementById('loginBtn');
            const loginBtnText = document.getElementById('loginBtnText');
            const loadingIndicator = document.getElementById('loadingIndicator');
            
            loginBtn.disabled = false;
            loginBtnText.textContent = '登录系统';
            loadingIndicator.style.display = 'none';
        }
        
        // 显示通知
        function showNotification(message, type) {
            const errorMessage = document.getElementById('errorMessage');
            
            if (type === 'error') {
                errorMessage.style.color = '#ff4d4d';
            } else if (type === 'success') {
                errorMessage.style.color = '#4CAF50';
            }
            
            errorMessage.textContent = message;
            errorMessage.style.display = 'block';
            
            // 3秒后自动隐藏
            setTimeout(() => {
                errorMessage.style.display = 'none';
            }, 3000);
        }
        
        // 添加输入框焦点效果
        document.getElementById('mobile').addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        document.getElementById('mobile').addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
        
        document.getElementById('password').addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        document.getElementById('password').addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
    </script>
</body>
</html>